<script setup>
  import { ref } from 'vue'
  import { VueFlow, useVueFlow } from '@vue-flow/core'
  import DropzoneBackground from './DropzoneBackground.vue'
  import Sidebar from './Sidebar.vue'
  import useDragAndDrop from './useDnD'

  const { onConnect, addEdges, toObject, fromObject } = useVueFlow()

  const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()

  const nodes = ref([])

  onConnect(addEdges)

  const goSave = () => {
    console.log('json________', toObject())
    fromObject(toObject()).then((res) => {
      console.log('res_______', res)
    })
  }
</script>

<template>
  <div class="dnd-flow w-full h-full" @drop="onDrop">
    <Sidebar /> <button class="absolute top-4 right-4" @click="goSave">Save</button>
    <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
      <DropzoneBackground
        :style="{
          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
          transition: 'background-color 0.2s ease',
        }"
      >
        <p v-if="isDragOver">Drop here</p>
      </DropzoneBackground>
    </VueFlow>
  </div>
</template>
